<template>

    <el-container class="wrapper1">
        <el-aside width="180px">
            <!-- 子菜单 -->
            <el-menu mode="vertical" default-active="2" :router="true" :unique-opened="true" @open="handleOpen"
                @close="handleClose" class="el-menu-vertical-demo">
                <el-sub-menu v-for="(item, index) in treeList.values" :key="index + 1" :index="index + 1">
                    <template #title>
                        <el-icon>
                            <location />
                        </el-icon>
                        <span>{{ item.PName }}</span>
                    </template>
                    <el-menu-item v-for="(item1, index) in item.Children" :key="index + 1" :index="item1.Path"
                        @click="getParentPermissionsByPId(item1.PId)">
                        <el-icon><icon-menu /></el-icon>
                        <span>{{ item1.PName }}</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </el-aside>
        <el-container class="wrapper1">
            <el-header>
                <!-- 面包屑 -->
                <el-card v-show="permissionList">
                    <el-breadcrumb :separator-icon="ArrowRight">
                        <!-- <el-breadcrumb-item >员工管理</el-breadcrumb-item>
                    <el-breadcrumb-item>员工列表</el-breadcrumb-item> -->
                        <el-breadcrumb-item v-for="item in permissionList" :key="item.PId"
                            v-show="item.PId == parentId || item.Path == Route.fullPath" :to="{ path: item.Path }">
                            {{ item.PName }}</el-breadcrumb-item>
                    </el-breadcrumb>
                </el-card>
            </el-header>
            <el-main>
                <RouterView />
            </el-main>

        </el-container>
    </el-container>
</template>
<script lang="ts" setup>
import { ArrowRight } from '@element-plus/icons-vue'

import { ElForm } from "element-plus"
import { reactive, ref, onMounted } from "vue"
import { useRoute } from 'vue-router'
import { session } from "../../stores/storageHelper"
import { watch } from 'vue';
import axios from 'axios';

import { loginStore } from '@/stores/login'
import { baseURL_dev } from '@/config/baseURL'

const baseURL = baseURL_dev
axios.defaults.baseURL = baseURL;

const store = loginStore();
const user = store.getUserInfo();

const Route = useRoute();
//观察路由变化
watch(() => Route.fullPath,
    () => {
        if (Route.name != '') {
            getTreeList();
        }
    }
)
const handleOpen = (key: string, keyPath: string[]) => {

}
const handleClose = (key: string, keyPath: string[]) => {

}

const form = reactive({
    StoreId: 0,
    StoreName: "微盟酒店",
    Address: "天津/天津市/河北区",
    HotelType: "公寓式酒店",
    HotelLogo: "",
    Introduction: "233",
    Remark: "真舒服啊",
});
const operator = reactive({
    TenantName: "cfy",
    RealName: "靓仔",
    Tel: "13142390366",
    QQ: "465016011",
    VX: "13142390366",
    Emails: "465016011@qq.com",

});
interface ListMenu {
    PId: string,
    PName: string,
    ParentId: string,
    Path: string,
    Icon: string,
    Children: ListMenu[]
}

const treeList = reactive<ListMenu[]>([]);
const permissionList = ref<ListMenu[]>([]);
//左侧树形
function getTreeList() {

    let empId = user.IsTenant ? user.TenantId + 'admin' : user.UId;

    axios.get(baseURL + "Permission/GetMenusByEId?empId=" + empId + "&parentId=" + session.get("parentId")).then(res => {
        treeList.values = res.data.Data;
    })
}
//所有的权限列表（绑面包屑）
function getAllPermissions() {
    axios.get(baseURL + "Permission/GetAllPermissions").then(res => {
        permissionList.value = res.data.Data;
    })
}
//根据父类编号获取子权限列表
//const childPermissions = ref<ListMenu[]>([])
/* function getChildPermissionsByParentId(parentId: string) {
    axios.get("Permission/GetSubPermissionsByParentId?parentId=" + parentId).then(res => {
        childPermissions.value = res.data.Data;
        console.log(childPermissions.value);

    });
} */

const parentId = ref<string>("");
//根据权限编号获取父级编号
function getParentPermissionsByPId(pId: string) {
    axios.get(baseURL + "Permission/GetParentIdByPId?pId=" + pId).then(res => {
        parentId.value = res.data.Data;
        console.log(parentId.value);
    })
}
onMounted(() => {

    getTreeList();
    getAllPermissions();
})

</script>
<style>
hr {
    margin: 20px 0;
}

.el-aside {
    background-color: white;
    height: 100vh;
}

.el-card {
    margin-bottom: 20px;
}

.header,
.footer {
    /* line-height: 20px; */
    position: fixed;

}

.el-menu-item {
    text-align: left;
}

.wrapper1 {
    height: 100vh;
    /* 设置框架的高度为可视窗口的高度 */
    overflow: auto;
    /* 让框架具有滚动条 */
    position: relative;
    /* 设置框架的position为relative */
}
</style>